<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>空域监视系统</title>
		<link href="css/a.css" rel="stylesheet" type="text/css">

	</head>

	<body>
		<!-- 航线运行分析报告（飞行热点图） -->
		<!-- <div id="load"><loading v-show="showLoading"></loading></div> -->
		<div id="app" v-cloak>
			<el-container>
				<el-header>
					<div class="header-left">
						<div class="map_logo">
							<img src="images/logo.png" alt="">
							<span>空域监视系统</span>
						</div>
						<div class="map_nav">
							<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#062e4d" text-color="#fff" active-text-color="#fff">
								<el-menu-item index="1">设置</el-menu-item>
								<el-menu-item index="2">书签</el-menu-item>
								<el-menu-item index="3">回放</el-menu-item>
								<el-menu-item index="4">统计</el-menu-item>
							</el-menu>
							<div :class="settingData.showSettingbox?'navfloatbox-setting navfloatbox show':'navfloatbox-setting navfloatbox'">
								<div class="tit">
									<h2>设置</h2>
								</div>
								<div class="setting-main">
									<el-tabs v-model="settingData.activeNavtab" type="card" @tab-click="handleClick">
										<el-tab-pane label="数据源切换" name="first">
											<div class="setting-bd">
												<div class="sourcelist">
													<span>ADS-B</span>
													<el-switch v-model="settingData.settingval1" active-color="#062e4d" inactive-color="#0d0e11"></el-switch>
												</div>
												<div class="sourcelist">
													<span>北斗</span>
													<el-switch v-model="settingData.settingval2" active-color="#062e4d" inactive-color="#0d0e11"></el-switch>
												</div>
												<div class="sourcelist">
													<span>移动</span>
													<el-switch active-color="#062e4d" inactive-color="#0d0e11"></el-switch>
												</div>
												<div class="sourcelist">
													<span>AIS</span>
													<el-switch active-color="#062e4d" inactive-color="#0d0e11"></el-switch>
												</div>
												<div class="sourcelist">
													<span>反无人机</span>
													<el-switch active-color="#062e4d" inactive-color="#0d0e11"></el-switch>
												</div>
											</div>
										</el-tab-pane>
										<el-tab-pane label="基础设置" name="second">
											<div class="setting-bd">
												<div class="baseinfo">
													<div class="infolist">
														<span>标牌</span>
														<el-switch v-model="settingData.settingval1" active-color="#062e4d" inactive-color="#0d0e11"></el-switch>
													</div>
													<div class="infolist">
														<span>尾迹</span>
														<el-switch v-model="settingData.wakeOpacity" @change="setWake" active-color="#062e4d" inactive-color="#0d0e11"></el-switch>
													</div>
													<div class="infolist">
														<span>速度过滤</span>
														<el-slider v-model="settingData.baseinfoval1" range :max="10"></el-slider>
													</div>
													<div class="infolist">
														<span>高度过滤</span>
														<el-slider v-model="settingData.baseinfoval2" range :max="10"></el-slider>
													</div>
													<div class="infolist">
														<span>地图风格</span>
														<el-select v-model="settingData.value" placeholder="请选择">
															<el-option v-for="item in settingData.options" :key="item.value" :label="item.label" :value="item.value"></el-option>
														</el-select>
													</div>
													<div class="infolist">
														<span>地图亮度</span>
														<el-slider v-model="settingData.baseinfoval3"></el-slider>
													</div>
												</div>
											</div>
										</el-tab-pane>
										<el-tab-pane label="告警设置" name="third"></el-tab-pane>
									</el-tabs>
								</div>
							</div>
						</div>
						<div class="mao_search">
							<el-input placeholder="请输入内容" suffix-icon="el-icon-search" v-model="input21">
							</el-input>
						</div>
					</div>

					<div class="header-right">
						<div class="userInfo">
							<div class="avatar-name">
								<!-- <span class="date">2018.9.11</span> -->
								<span class="date">{{nowTime}}</span>

								<span>{{userInfo.userName}}</span>
								<span class="icon iconfont icon-diannao" @click="goset"></span>
								<span class="icon iconfont icon-tubiaozhizuomoban"></span>
								<span class="icon iconfont icon-power-bold-01"></span>
							</div>
						</div>
						<div class="nav_btn">

						</div>
					</div>

				</el-header>
				<el-main>
					<div id="map">

					</div>
				</el-main>
			</el-container>

			<!--回放工具条-->
			<div class="replaybar-wrap">
				<div class="replaybar-left">
					<el-form>
						<el-form-item label="航空器类型">
							<el-select v-model="selectedDatatype" placeholder="请选择" clearable>
								<el-option v-for="item in dataTypeoptions" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="时间">
							<el-date-picker v-model="value5" type="datetimerange" :picker-options="pickerOptions2" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
							</el-date-picker>
						</el-form-item>
						

					</el-form>
				</div>
				<div class="replaybar-right">
					
					<div class="largerbox">
						<span>绘制热点</span>
					</div>
				</div>
			</div>
		</div>

		<script src="plugins/vue2.5.9.js"></script>
		<script src="plugins/axios.min.js"></script>
		<!-- <script src="plugins/ele2.3.3.js"></script> -->
		<script src="plugins/element-ui.js"></script>
		<script src="plugins/httpVueLoader.js"></script>
		<script src="plugins/jquery.min.js"></script>

		<script src="plugins/leaflet.js"></script>
		<script src="plugins/iclient9-leaflet.min.js"></script>
		<script src="plugins/leaflet.draw.js"></script>
		<script src="plugins/leaflet.measurecontrol.min.js"></script>
		<script src="plugins/leaflet.rotatedMarker.js"></script>

		<script src="plugins/leaflet-heat.js"></script>

		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				// mixins: [mixin_common],
				data: {
					userInfo: {
						userName: 'abc',
						pointsDecimal: [29.618493015610223, 106.6510945558548]
					},
					map:null,
					mapLayer:[],//地图路径
					nowTime: "",
					nowTimegang: "",
					input21: "",
					activeIndex: '1',

					settingData: { //设置-选项卡的数据
						showSettingbox: false,
						activeNavtab: 'first', //设置弹窗切换的当前活跃项

						settingval1: '', //标牌显示隐藏
						wakeOpacity: false, //尾迹显示隐藏
						settingval2: '',

						baseinfoval1: 0,
						baseinfoval2: 0,
						baseinfoval3: 0,
						options: [{
							value: '选项1',
							label: '黄金糕'
						}, {
							value: '选项2',
							label: '双皮奶'
						}, {
							value: '选项3',
							label: '蚵仔煎'
						}, {
							value: '选项4',
							label: '龙须面'
						}, {
							value: '选项5',
							label: '北京烤鸭'
						}],
						value: ''
					},

					pickerOptions2: {
						shortcuts: [{
							text: '最近一周',
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
								picker.$emit('pick', [start, end]);
							}
						}, {
							text: '最近一个月',
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
								picker.$emit('pick', [start, end]);
							}
						}, {
							text: '最近三个月',
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
								picker.$emit('pick', [start, end]);
							}
						}]
					},
					value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
					value5: '',

					dataTypeoptions: [{
						value: '选项1',
						label: '黄金糕'
					}, {
						value: '选项2',
						label: '双皮奶'
					}, {
						value: '选项3',
						label: '蚵仔煎'
					}, {
						value: '选项4',
						label: '龙须面'
					}, {
						value: '选项5',
						label: '北京烤鸭'
					}],
					selectedDatatype: '',
				},
				created: function() {
					var _this = this;
					
				},
				filters: {

				},

				mounted: function() {
					this.nowTimes()
					this.initMap();
				},

				methods: {
					nowTimes() {
						// 系统时间
						var self = this;
						self.timeFormate(new Date());
						setInterval(function() {
							self.timeFormate(new Date())
						}, 1000);
					},
					timeFormate(timeStamp) {
						let year = new Date(timeStamp).getFullYear();
						let month = new Date(timeStamp).getMonth() + 1 < 10 ? "0" + (new Date(timeStamp).getMonth() + 1) : new Date(timeStamp).getMonth() + 1;
						let date = new Date(timeStamp).getDate() < 10 ? "0" + new Date(timeStamp).getDate() : new Date(timeStamp).getDate();
						let hh = new Date(timeStamp).getHours() < 10 ? "0" + new Date(timeStamp).getHours() : new Date(timeStamp).getHours();
						let mm = new Date(timeStamp).getMinutes() < 10 ? "0" + new Date(timeStamp).getMinutes() : new Date(timeStamp).getMinutes();
						let ss = new Date(timeStamp).getSeconds() < 10 ? "0" + new Date(timeStamp).getSeconds() : new Date(timeStamp).getSeconds();
						this.nowTime = year + "年" + month + "月" + date + "日" + " " + hh + ":" + mm + ":" + ss;
						this.nowTimegang = year + "-" + month + "-" + date + " " + hh + ":" + mm + ":" + ss;
						this.executorDate = year + "-" + month + "-" + date;
					},
					handleSelect(key, keyPath) {
						// 头部导航按钮选择
						var self = this;
						if(key == 1) {
							self.settingData.showSettingbox = !self.settingData.showSettingbox;
						}
					},
					handleClick(tab, event) {
						//导航工具标题切换
					},
					setWake() {
						// 设置-基础设置-尾迹显示隐藏
						console.log(this.settingData.wakeOpacity);
					},
					goset() {
						// 跳转后台界面按钮
						window.open("http://dkjs.system.op-fly.cn/#/user");
					},
					initMap(){
						var url = 'http://support.supermap.com.cn:8090';

						var China = L.supermap.tiledMapLayer(url + '/iserver/services/map-china400/rest/maps/China');
						var ChinaDark = L.supermap.tiledMapLayer(url +
							'/iserver/services/map-china400/rest/maps/ChinaDark');
						this.mapLayer = [{
							mapName:"仪表航图",
							mapUrl:'http://support.supermap.com.cn:8090/iserver/services/map-china400/rest/maps/China'
						},{
							mapName:"卫星遥感地图",
							mapUrl:"http://support.supermap.com.cn:8090/iserver/services/map-china400/rest/maps/ChinaDark"
						}];
						// , {noWrap:true})
						this.map = L.map('map', {
							center: this.userInfo.pointsDecimal,
							maxZoom: 18,
							zoom: 8,
							zoomControl: false,
							logoControl: true,
							// 设置图层数组
							layers: [China]
						});
					}
				}
			});
		</script>

	</body>

</html>